<!DOCTYPE html>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	
		<div id="root">
			<h2>报价</h2>
			<input type="text" placeholder="请输入" v-model="keyWord">
			<ul>
				<li v-for="(item,index) of filPerons" :key="index">
					{{item.name}}---{{item.age}}---{{item.sex}}
				</li>
			</ul>
		</div>
 
		<script type="text/javascript">
			Vue.config.productionTip = false
			
 
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'1',name:'张三丰',age:19,sex:'男'},
						{id:'2',name:'张晓雨',age:20,sex:'女'},
						{id:'3',name:'王晓明',age:28,sex:'男'},
						{id:'4',name:'王大熊',age:32,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
</html>